<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>生命科学馆管理系统</title>
    <script>
        // 页面加载时设置默认用户信息
        (function() {
            // 设置默认的生命科学馆管理用户信息
            if (!localStorage.getItem('currentUser')) {
                localStorage.setItem('currentUser', JSON.stringify({
                    name: '生命科学馆管理员',
                    role: '生命科学馆管理员'
                }));
                localStorage.setItem('isLoggedIn', 'true');
            }
        })();
    </script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Microsoft YaHei', sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: #333;
            min-height: 100vh;
        }

        .container {
            display: flex;
            min-height: 100vh;
        }

        /* 左侧侧边栏 */
        .sidebar {
            width: 280px;
            background: linear-gradient(180deg, #1e3a8a 0%, #1e40af 50%, #3b82f6 100%);
            color: white;
            padding: 20px 0;
            box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15);
        }

        .sidebar-header {
            padding: 20px;
            text-align: center;
            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
            margin-bottom: 20px;
        }

        .sidebar-title {
            font-size: 20px;
            font-weight: bold;
        }

        .nav-menu {
            list-style: none;
            padding: 0 15px;
        }

        .nav-item {
            margin-bottom: 8px;
        }

        .nav-link {
            display: flex;
            align-items: center;
            padding: 15px 20px;
            color: white;
            text-decoration: none;
            transition: all 0.3s ease;
            border-radius: 10px;
            border-left: 4px solid transparent;
        }

        .nav-link:hover, .nav-link.active {
            background: rgba(255, 255, 255, 0.1);
            border-left-color: #60a5fa;
            transform: translateX(5px);
        }

        .nav-icon {
            margin-right: 15px;
            font-size: 18px;
        }

        /* 右侧主内容区域 */
        .main-content {
            flex: 1;
            padding: 30px;
            background: rgba(255, 255, 255, 0.95);
        }

        .content-header {
            background: white;
            padding: 25px 30px;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            margin-bottom: 30px;
        }

        .page-title {
            font-size: 28px;
            font-weight: bold;
            color: #1e3a8a;
            margin-bottom: 10px;
        }

        .breadcrumb {
            color: #64748b;
            font-size: 14px;
        }

        /* 统计卡片 */
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }

        .stat-card {
            background: white;
            border-radius: 15px;
            padding: 25px;
            box-shadow: 0 8px 15px rgba(0, 0, 0, 0.08);
            border-left: 4px solid #3b82f6;
        }

        .stat-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 15px;
        }

        .stat-title {
            font-size: 16px;
            font-weight: 600;
            color: #374151;
        }

        .stat-icon {
            font-size: 24px;
            color: #3b82f6;
        }

        .stat-value {
            font-size: 32px;
            font-weight: bold;
            color: #1e3a8a;
            margin-bottom: 5px;
        }

        .stat-change {
            font-size: 14px;
            color: #059669;
        }

        /* 数据表格模块 */
        .data-module {
            background: white;
            border-radius: 15px;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
            margin-bottom: 30px;
            overflow: hidden;
        }

        .module-header {
            background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
            color: white;
            padding: 20px 25px;
            font-size: 18px;
            font-weight: bold;
        }

        .module-content {
            padding: 30px;
        }

        /* 搜索区域 */
        .search-section {
            background: #f8fafc;
            border-radius: 10px;
            padding: 20px;
            margin-bottom: 20px;
        }

        .search-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
            margin-bottom: 20px;
        }

        .search-group {
            display: flex;
            flex-direction: column;
        }

        .search-label {
            font-size: 14px;
            font-weight: 500;
            color: #6b7280;
            margin-bottom: 8px;
        }

        .search-input {
            padding: 10px 12px;
            border: 2px solid #e5e7eb;
            border-radius: 8px;
            font-size: 14px;
        }

        .search-input:focus {
            outline: none;
            border-color: #3b82f6;
        }

        .search-actions {
            display: flex;
            gap: 10px;
        }

        .btn-search {
            padding: 10px 20px;
            border: none;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .btn-search-primary {
            background: #3b82f6;
            color: white;
        }

        .btn-search-primary:hover {
            background: #2563eb;
        }

        .btn-search-secondary {
            background: #f3f4f6;
            color: #6b7280;
        }

        .btn-search-secondary:hover {
            background: #e5e7eb;
        }

        /* 表格样式 */
        .table-container {
            background: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
        }

        .data-table {
            width: 100%;
            border-collapse: collapse;
        }

        .data-table th {
            background: #f8fafc;
            padding: 15px 20px;
            text-align: left;
            font-weight: 600;
            color: #374151;
            border-bottom: 2px solid #e5e7eb;
        }

        .data-table td {
            padding: 15px 20px;
            border-bottom: 1px solid #f3f4f6;
            color: #6b7280;
        }

        .data-table tr:hover {
            background: #f8fafc;
        }

        /* 状态标签 */
        .status-badge {
            display: inline-block;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
            text-align: center;
        }

        .status-active {
            background: #d1fae5;
            color: #059669;
        }

        .status-inactive {
            background: #fee2e2;
            color: #dc2626;
        }

        .status-pending {
            background: #fef3c7;
            color: #d97706;
        }

        /* 操作按钮 */
        .action-buttons {
            display: flex;
            gap: 8px;
        }

        .btn-action {
            padding: 6px 12px;
            border: none;
            border-radius: 6px;
            font-size: 12px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .btn-action-view {
            background: #10b981;
            color: white;
        }

        .btn-action-view:hover {
            background: #059669;
        }

        .btn-action-edit {
            background: #3b82f6;
            color: white;
        }

        .btn-action-edit:hover {
            background: #2563eb;
        }

        .btn-action-delete {
            background: #ef4444;
            color: white;
        }

        .btn-action-delete:hover {
            background: #dc2626;
        }

        /* 用户信息 */
        .user-info {
            display: flex;
            align-items: center;
            gap: 15px;
            background: #f8fafc;
            padding: 12px 20px;
            border-radius: 10px;
        }

        .user-avatar {
            width: 40px;
            height: 40px;
            background: #3b82f6;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 18px;
        }

        .user-details {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }

        .user-name {
            font-size: 14px;
            font-weight: 600;
            color: #374151;
        }

        .user-role {
            font-size: 12px;
            color: #6b7280;
        }

        .btn-logout {
            padding: 8px 16px;
            background: #ef4444;
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 12px;
            font-weight: 500;
            cursor: pointer;
        }

        .btn-logout:hover {
            background: #dc2626;
        }

        .header-top {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
        }

        .header-left {
            flex: 1;
        }

        .header-right {
            display: flex;
            align-items: center;
        }

        /* 内容区域样式 */
        .content-section {
            display: none;
        }

        .content-section:first-child {
            display: block;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 左侧侧边栏 -->
        <nav class="sidebar">
            <div class="sidebar-header">
                <div class="sidebar-title">生命科学馆管理系统</div>
            </div>
            
            <ul class="nav-menu">
                <li class="nav-item">
                    <a href="#" class="nav-link active" onclick="switchFunction('session-management')">
                        <span class="nav-icon">📅</span>
                        <span class="nav-text">场次管理</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="guide-management.html" class="nav-link">
                        <span class="nav-icon">👨‍🏫</span>
                        <span class="nav-text">讲解员管理</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="blacklist-management.html" class="nav-link">
                        <span class="nav-icon">🚫</span>
                        <span class="nav-text">黑名单管理</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="statistics-module.html" class="nav-link">
                        <span class="nav-icon">📊</span>
                        <span class="nav-text">统计表模块</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="volunteer-management.html" class="nav-link">
                        <span class="nav-icon">🤝</span>
                        <span class="nav-text">志愿者管理</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="activity-album.html" class="nav-link">
                        <span class="nav-icon">📸</span>
                        <span class="nav-text">活动相册</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="activity-management.html" class="nav-link">
                        <span class="nav-icon">🏠</span>
                        <span class="nav-text">返回主页</span>
                    </a>
                </li>
            </ul>
        </nav>

        <!-- 右侧主内容区域 -->
        <main class="main-content">
            <div class="content-header">
                <div class="header-top">
                    <div class="header-left">
                        <h1 class="page-title">生命科学馆管理</h1>
                        <div class="breadcrumb">生命科学馆管理 > 场次管理</div>
                    </div>
                    <div class="header-right">
                        <div class="user-info">
                            <div class="user-avatar">👤</div>
                            <div class="user-details">
                                <div class="user-name" id="current-user-name">管理员</div>
                                <div class="user-role" id="current-user-role">生命科学馆管理员</div>
                            </div>
                            <button class="btn-logout" onclick="logout()">退出登录</button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 统计概览 -->
            <div class="stats-grid">
                <div class="stat-card">
                    <div class="stat-header">
                        <div class="stat-title">今日参观人数</div>
                        <div class="stat-icon">👥</div>
                    </div>
                    <div class="stat-value">1,234</div>
                    <div class="stat-change">↗ +12.5%</div>
                </div>
                <div class="stat-card">
                    <div class="stat-header">
                        <div class="stat-title">本月参观人数</div>
                        <div class="stat-icon">📊</div>
                    </div>
                    <div class="stat-value">28,567</div>
                    <div class="stat-change">↗ +8.3%</div>
                </div>
                <div class="stat-card">
                    <div class="stat-header">
                        <div class="stat-title">活跃讲解员</div>
                        <div class="stat-icon">👨‍🏫</div>
                    </div>
                    <div class="stat-value">15</div>
                    <div class="stat-change">↗ +2</div>
                </div>
                <div class="stat-card">
                    <div class="stat-header">
                        <div class="stat-title">志愿者数量</div>
                        <div class="stat-icon">🤝</div>
                    </div>
                    <div class="stat-value">45</div>
                    <div class="stat-change">↗ +5</div>
                </div>
            </div>

            <!-- 场次参观明细表 -->
            <div class="data-module">
                <div class="module-header">场次参观明细表</div>
                <div class="module-content">
                    <div class="search-section">
                        <div class="search-grid">
                            <div class="search-group">
                                <label class="search-label">场次日期</label>
                                <input type="date" class="search-input">
                            </div>
                            <div class="search-group">
                                <label class="search-label">场次时间</label>
                                <select class="search-input">
                                    <option value="">全部时间</option>
                                    <option value="morning">上午场</option>
                                    <option value="afternoon">下午场</option>
                                    <option value="evening">晚场</option>
                                </select>
                            </div>
                            <div class="search-group">
                                <label class="search-label">讲解员</label>
                                <input type="text" class="search-input" placeholder="请输入讲解员姓名">
                            </div>
                            <div class="search-group">
                                <label class="search-label">参观人数</label>
                                <select class="search-input">
                                    <option value="">全部</option>
                                    <option value="0-20">0-20人</option>
                                    <option value="21-50">21-50人</option>
                                    <option value="51-100">51-100人</option>
                                    <option value="100+">100人以上</option>
                                </select>
                            </div>
                        </div>
                        <div class="search-actions">
                            <button class="btn-search btn-search-primary">🔍 搜索</button>
                            <button class="btn-search btn-search-secondary">🔄 重置</button>
                            <button class="btn-search btn-search-primary">📊 导出</button>
                        </div>
                    </div>

                    <div class="table-container">
                        <table class="data-table">
                            <thead>
                                <tr>
                                    <th>场次编号</th>
                                    <th>日期</th>
                                    <th>时间</th>
                                    <th>讲解员</th>
                                    <th>参观人数</th>
                                    <th>预约人数</th>
                                    <th>实际参观</th>
                                    <th>状态</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>SS001</td>
                                    <td>2024-01-15</td>
                                    <td>09:00-11:00</td>
                                    <td>张老师</td>
                                    <td>45</td>
                                    <td>50</td>
                                    <td>42</td>
                                    <td><span class="status-badge status-active">已完成</span></td>
                                    <td class="action-buttons">
                                        <button class="btn-action btn-action-view">查看</button>
                                        <button class="btn-action btn-action-edit">编辑</button>
                                    </td>
                                </tr>
                                <tr>
                                    <td>SS002</td>
                                    <td>2024-01-15</td>
                                    <td>14:00-16:00</td>
                                    <td>李老师</td>
                                    <td>38</td>
                                    <td>40</td>
                                    <td>35</td>
                                    <td><span class="status-badge status-active">已完成</span></td>
                                    <td class="action-buttons">
                                        <button class="btn-action btn-action-view">查看</button>
                                        <button class="btn-action btn-action-edit">编辑</button>
                                    </td>
                                </tr>
                                <tr>
                                    <td>SS003</td>
                                    <td>2024-01-16</td>
                                    <td>09:00-11:00</td>
                                    <td>王老师</td>
                                    <td>52</td>
                                    <td>55</td>
                                    <td>48</td>
                                    <td><span class="status-badge status-pending">进行中</span></td>
                                    <td class="action-buttons">
                                        <button class="btn-action btn-action-view">查看</button>
                                        <button class="btn-action btn-action-edit">编辑</button>
                                    </td>
                                </tr>
                                <tr>
                                    <td>SS004</td>
                                    <td>2024-01-16</td>
                                    <td>14:00-16:00</td>
                                    <td>赵老师</td>
                                    <td>0</td>
                                    <td>30</td>
                                    <td>0</td>
                                    <td><span class="status-badge status-inactive">已取消</span></td>
                                    <td class="action-buttons">
                                        <button class="btn-action btn-action-view">查看</button>
                                        <button class="btn-action btn-action-edit">编辑</button>
                                    </td>
                                </tr>
                                <tr>
                                    <td>SS005</td>
                                    <td>2024-01-17</td>
                                    <td>09:00-11:00</td>
                                    <td>陈老师</td>
                                    <td>0</td>
                                    <td>45</td>
                                    <td>0</td>
                                    <td><span class="status-badge status-pending">待开始</span></td>
                                    <td class="action-buttons">
                                        <button class="btn-action btn-action-view">查看</button>
                                        <button class="btn-action btn-action-edit">编辑</button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <!-- 场次参观统计表 -->
            <div class="data-module">
                <div class="module-header">场次参观统计表</div>
                <div class="module-content">
                    <div class="search-section">
                        <div class="search-grid">
                            <div class="search-group">
                                <label class="search-label">统计周期</label>
                                <select class="search-input">
                                    <option value="daily">日报</option>
                                    <option value="weekly">周报</option>
                                    <option value="monthly" selected>月报</option>
                                    <option value="yearly">年报</option>
                                </select>
                            </div>
                            <div class="search-group">
                                <label class="search-label">开始日期</label>
                                <input type="date" class="search-input">
                            </div>
                            <div class="search-group">
                                <label class="search-label">结束日期</label>
                                <input type="date" class="search-input">
                            </div>
                            <div class="search-group">
                                <label class="search-label">统计维度</label>
                                <select class="search-input">
                                    <option value="date">按日期</option>
                                    <option value="guide">按讲解员</option>
                                    <option value="time">按时段</option>
                                </select>
                            </div>
                        </div>
                        <div class="search-actions">
                            <button class="btn-search btn-search-primary">📊 生成统计</button>
                            <button class="btn-search btn-search-secondary">🔄 重置</button>
                            <button class="btn-search btn-search-primary">📄 导出报表</button>
                        </div>
                    </div>

                    <div class="table-container">
                        <table class="data-table">
                            <thead>
                                <tr>
                                    <th>统计周期</th>
                                    <th>总场次数</th>
                                    <th>总参观人数</th>
                                    <th>平均每场人数</th>
                                    <th>预约完成率</th>
                                    <th>讲解员数量</th>
                                    <th>最受欢迎时段</th>
                                    <th>最受欢迎讲解员</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>2024年1月</td>
                                    <td>156</td>
                                    <td>6,789</td>
                                    <td>43.5</td>
                                    <td>92.3%</td>
                                    <td>15</td>
                                    <td>14:00-16:00</td>
                                    <td>张老师</td>
                                    <td class="action-buttons">
                                        <button class="btn-action btn-action-view">查看详情</button>
                                        <button class="btn-action btn-action-edit">编辑</button>
                                    </td>
                                </tr>
                                <tr>
                                    <td>2023年12月</td>
                                    <td>148</td>
                                    <td>6,234</td>
                                    <td>42.1</td>
                                    <td>89.7%</td>
                                    <td>14</td>
                                    <td>09:00-11:00</td>
                                    <td>李老师</td>
                                    <td class="action-buttons">
                                        <button class="btn-action btn-action-view">查看详情</button>
                                        <button class="btn-action btn-action-edit">编辑</button>
                                    </td>
                                </tr>
                                <tr>
                                    <td>2023年11月</td>
                                    <td>142</td>
                                    <td>5,987</td>
                                    <td>42.2</td>
                                    <td>91.2%</td>
                                    <td>13</td>
                                    <td>14:00-16:00</td>
                                    <td>王老师</td>
                                    <td class="action-buttons">
                                        <button class="btn-action btn-action-view">查看详情</button>
                                        <button class="btn-action btn-action-edit">编辑</button>
                                    </td>
                                </tr>
                                <tr>
                                    <td>2023年10月</td>
                                    <td>135</td>
                                    <td>5,456</td>
                                    <td>40.4</td>
                                    <td>88.9%</td>
                                    <td>12</td>
                                    <td>09:00-11:00</td>
                                    <td>赵老师</td>
                                    <td class="action-buttons">
                                        <button class="btn-action btn-action-view">查看详情</button>
                                        <button class="btn-action btn-action-edit">编辑</button>
                                    </td>
                                </tr>
                                <tr>
                                    <td>2023年9月</td>
                                    <td>128</td>
                                    <td>5,123</td>
                                    <td>40.0</td>
                                    <td>87.5%</td>
                                    <td>11</td>
                                    <td>14:00-16:00</td>
                                    <td>陈老师</td>
                                    <td class="action-buttons">
                                        <button class="btn-action btn-action-view">查看详情</button>
                                        <button class="btn-action btn-action-edit">编辑</button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

        </main>
    </div>

    <script>
        // 页面加载时设置用户信息
        document.addEventListener('DOMContentLoaded', function() {
            const currentUser = localStorage.getItem('currentUser');
            if (currentUser) {
                const user = JSON.parse(currentUser);
                document.getElementById('current-user-name').textContent = user.name || '管理员';
                document.getElementById('current-user-role').textContent = user.role || '生命科学馆管理员';
            }
        });

        // 功能切换
        function switchFunction(functionName) {
            // 移除所有活动状态
            document.querySelectorAll('.nav-link').forEach(link => {
                link.classList.remove('active');
            });
            
            // 添加活动状态到当前点击的链接
            event.target.closest('.nav-link').classList.add('active');
            
            // 更新面包屑
            const breadcrumb = document.querySelector('.breadcrumb');
            const functionNames = {
                'session-management': '场次管理'
            };
            
            if (functionNames[functionName]) {
                breadcrumb.innerHTML = `生命科学馆管理 > ${functionNames[functionName]}`;
            }

            // 切换内容显示
            showContent(functionName);
        }

        // 显示对应内容
        function showContent(functionName) {
            // 隐藏所有内容
            const allContent = document.querySelectorAll('.content-section');
            allContent.forEach(content => {
                content.style.display = 'none';
            });

            // 显示对应内容
            const targetContent = document.getElementById(functionName + '-content');
            if (targetContent) {
                targetContent.style.display = 'block';
            }
        }

        // 退出登录
        function logout() {
            localStorage.removeItem('isLoggedIn');
            localStorage.removeItem('currentUser');
            window.location.href = 'activity-management.html';
        }


    </script>
</body>
</html>
